<!DOCTYPE html>
<html>
<head>
  <script src="../../processing.js"></script>
  <script src="../init.js"></script>
<link rel="stylesheet" href="../style.css"/></head>
<body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1>
<h2>Transparency</h2>

<p>This code was updated from the Java source to work with Processing.js asynchronous image loading. <sup>-F1LT3R</sup></p> 

<p>Move the pointer left and right across the image to change
its position. This program overlays one image over another 
by modifying the alpha value of the image with the tint() function.</p>

<p><a href="http://processing.org/learning/basics/transparency.html"><b>Original Processing.org Example:</b> Transparency</a><br>
<script type="application/processing">
PImage a, b;
float offset;

void setup() 
{
  size(200, 200);
  a = loadImage("data/construct.jpg");  // Load an image into the program 
  b = loadImage("data/wash.jpg");   // Load an image into the program 
  frameRate(60);
}

void draw() 
{ 
  image(a, 0, 0);
  float offsetTarget = map(mouseX, 0, width, -b.width/2 - width/2, 0);
  offset += (offsetTarget-offset)*0.05; 
  tint(255, 153);
  image(b, offset, 20);
}
</script><canvas width="200" height="200"></canvas></p>
<div style="height:0px;width:0px;overflow:hidden;"><img src='data/construct.jpg' id='construct.jpg'/><img src='data/wash.jpg' id='wash.jpg'/></div>

<pre><b>// All Examples Written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a>
// unless otherwise stated.</b>
PImage a, b;
float offset;

void setup() 
{
  size(200, 200);
  a = loadImage("construct.jpg");  // Load an image into the program 
  b = loadImage("wash.jpg");   // Load an image into the program 
  frameRate(60);
}

void draw() 
{ 
  image(a, 0, 0);
  float offsetTarget = map(mouseX, 0, width, -b.width/2 - width/2, 0);
  offset += (offsetTarget-offset)*0.05; 
  tint(255, 153);
  image(b, offset, 20);
}</pre>
</body>
</html>
